<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 标题 -->
	<title>发起新预约</title>
	<!-- 关键词 -->
	<meta name="keywords" content="" />
	<!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<!-- 最新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- 时间 -->
	<link rel="stylesheet" href="css/date.css" type="text/css">
	<!-- 提示 -->
	<link rel="stylesheet" href="css/tip.css" type="text/css">
	<!-- 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body id="usercenter">
	<div class="doctor-all">
    	<div class="container">
    		<div class="doctor-list clearfix">
	    		<a href="">
	    			<div class="doctor-avater">
	    				<img src="images/avater.jpg" alt="">
	    			</div>
	    			<div class="doctor-info">
	    				<div class="doctor-name">
		    				李方才<span>主任医师</span>
		    				<a href="javascript:;" class="reserve-focus" onclick="chg(this);">关注</a> 
	    				</div>
	    				<div class="doctor-hospital">
	    					浙江大学医学院附属第二医院
	    				</div>
	    				<div class="doctor-kesi">
	    					骨科
	    				</div>
	    			</div>
	    		</a>
    		</div>
    	</div>
    </div>
    <div class="reseve-top">
    	<div class="container">
    		<h4>选择服务类型</h4>
    		<a href="">电话咨询（该功能暂未开通）</a>
    	</div>
    </div>
    <form action="">
    	<div class="reseve-center">
    	    <div class="container">
    	    	<div class="reseve-item clearfix">
		            <div class="left">
		            	<label for="">需支付金额</label>
		            </div>
		            <div class="right" style="padding-top:0">
		            	<div class="pay">
		            		200元
		            	</div>
		            </div>
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">预约时间</label>
			            </div>
			            <div class="col-xs-7">
			                <input value="" class="form-control" name="appDateTime" id="appDateTime" type="text" placeholder="预约时间" style="background:#fff;cursor: pointer;">
			            </div>
	            	</div>  
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">会诊地点</label>
			            </div>
			            <div class="col-xs-6">
			                <select name="" id="" class="form-control">
		            	      <option value ="">医生所在医院</option>
							  <option value ="">同济医院</option>
							  <option value=" ">协和医院</option>
							  <option value=" ">北京医院</option>
		            	    </select>
			            </div>
	            	</div>  
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">私人医生</label>
			            </div>
			            <div class="col-xs-6">
			                <select name="" id="" class="form-control">
		            	       <option value ="">林康医家</option>
							   <option value ="">同济医家</option>
							   <option value=" ">协和医家</option>
							   <option value=" ">北京医家</option>
			            	</select>
			            </div>
	            	</div> 
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">您的姓名</label>
			            </div>
			            <div class="col-xs-7">
			                <input type="text" id="" name="" class="form-control" value="" tabindex="12" placeholder="请填写您的姓名" >
			            </div>
	            	</div> 
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">身份证号</label>
			            </div>
			            <div class="col-xs-7">
			                <input type="text" id="" name="" class="form-control" value="" tabindex="13" placeholder="身份证号码" >
			            </div>
	            	</div> 
	            </div>
	            <div class="reseve-item clearfix">
	                <div class="row">
	            		<div class="col-xs-3">
			            	<label for="">手机号码</label>
			            </div>
			            <div class="col-xs-7">
			                <input type="text" id="" name="" class="form-control" value="" tabindex="13" placeholder="手机号码" >
			            </div>
	            	</div> 
		           
	            </div>
	            <div class="reseve-item clearfix">
	            	<div class="row">
	            		<div class="col-xs-3">
			            	<label for="">问题描述</label>
			            </div>
			            <div class="col-xs-9">
			                <textarea rows="3" cols="80" name="message"  onkeydown="seditor_ctlent(event, 'fastpostvalidate($(\'fastpostform\'))');" tabindex="4" class="form-control" placeholder="问题描述" ></textarea>
			            </div>
	            	</div>  
	            </div>
    	    </div>
    		
    	</div>
	    <div class="reseve-bottom">
		    <div class="container">
		    	<a href="">提交订单</a>
		    	<a href="javascript:void(0)" class="run" id="tip-success">成功提示</a>
		    	<a href="javascript:void(0)" class="run" id="tip-error">错误提示</a>
		    </div>
	    </div>
    </form>

   <!-- 提示框内容 -->
   <div id="tip-a">
      	提交成功
   </div>
   <div id="tip-b">
      	信息错误
   </div>
    <script type="text/javascript"> 
	    function chg(obj){ 
	        if(obj.className != "over"){ 
	            obj.oldClass = obj.className; // 暂存原来的class，用于恢复 
	            obj.className = "over"; 
	            obj.innerHTML = "已关注";
	        }
	        else if(obj.oldClass){ 
	            obj.className = obj.oldClass; // 暂存原来的class，用于恢复 
	            obj.innerHTML = "关注";
	        } 
	    } 
	</script>
    <!-- jQuery文件 -->
	<script src="js/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>
	<script src="js/date.js" ></script>
    <script src="js/iscroll.js" ></script>
    <script src="js/tip.js" ></script>
    <script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				dateFormat: 'yyyy-mm-dd',
				lang: 'zh',
				showNow: true,
				nowText: "今天",
		        startYear: currYear - 10, //开始年份
		        endYear: currYear + 10 //结束年份
			};
		  	$("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
        });
    </script>
    
    <script>
	$(function(){
		$("#tip-success").click(function(){
			$("#tip-a").layerModel({
				timer : 2000
			});
		});
		$("#tip-error").click(function(){
			$("#tip-b").layerModel({
				timer : 2000
			});
		});
	});
   </script>
</body>
</html>

